<template>
  <div class="kb-select">
    <div class="select-label" @click="open">{{ curLabel }}</div>
    <div class="select-options" v-show="isOpen">
      <ul class="select-options-list">
        <li class="select-options-item" v-for="(item, index) in options" :key="index" @click="Select(item)">{{ item.label }}</li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    value: {
      type: [Number, String]
    },
    options: {
      type: Array,
      default: () => ([{ label: '2024年', value: 2024 }])
    },
    placeholder: {
      type: String,
      default: '请选择'
    }
  },
  data() {
    return {
      selfValue: '',
      isOpen: false
    }
  },
  computed: {
    curItem() {
      if (!this.selfValue || !this.options || this.options.length === 0) return null
      return this.options.find(item => item.value === this.selfValue)
    },
    curLabel() {
      if (!this.curItem) return this.placeholder
      return this.curItem.label
    }
  },
  watch: {
    value: {
      handler(val) {
        this.selfValue = val;
      },
      deep: true,
      immediate: true
    },
    selfValue: {
      handler(val) {
        this.$emit('input', val)
      },
      deep: true
    }
  },
  methods: {
    open() {
      this.isOpen = !this.isOpen
    },
    Select(item) {
      this.isOpen = false
      this.selfValue = item.value
    }
  }
}
</script>
<style lang="scss" scoped>
.kb-select {
  display: block;
  width: 85px;
  height: 20px;
  line-height: 20px;
  box-sizing: border-box;
  background: url(~@/assets/images/yyzhkb/kb-select-bg.svg) center center no-repeat;
  background-size: cover;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
  color: #fff;
  .select-label {
    padding-left: 9px;
  }
  .select-options {
    width: 100%;
  }
  .select-options-list {
    width: 100%;
    background: #04254B;
    .select-options-item:hover {
      background: linear-gradient(180deg, rgba(10, 78, 143, 0.8) 0%, rgba(41, 144, 243, 0.8) 100%);
    }
  }
  ul, li {
    list-style: none;
  }
}
</style>